<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
    <link rel="stylesheet" href="./css/Home.css">
</head>
<body>
    <div class="banner">
        <div class="nav">
            <div class="nav-warp">
                <div class="nav-left">
                    <img src="./img/shininglogo.png">
                </div>
                <div class="nav-right">
                    <a href="Home.html" class="home">Home</a>
                    <a href="./About.html">About</a>
                    <a href="Rendering.html">Rendering</a>
                    <a href="3DAnimation.html">3D&nbsp;Animation</a>
                    <a href="Bim.html">Bim</a>
                    <a href="Contact.html">Contact</a>
                    <span><img src="./img/nav.png"/></span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="content-main">
                <div class="top">
                    <div class="content-img1">
                        <img src="./img/home_pic_one_h.png" id="pic1">
                        <img src="./img/home_pic_one.png">
                    </div>
                    <div class="content-txt">
                        <div class="jiange jiange1"></div>
                        <h2>RENDERINGS</h2>
                        <p>Masterplan、Public Building、commercial Building、Residential Building、Landscape Designa</p>
                    </div>
                </div>
                <div class="center">
                    <div class="content-img2">
                        <img src="./img/home_pic_two_h.png" id="pic2">
                        <img src="./img/home_pic_two.jpg">
                    </div>
                    <div class="content-txt2">
                        <div class="jiange jiange2"></div>
                        <h2>BIM</h2>
                        <p>Model Completion、Clash Detection、MEP Integration、Curtain Wall Remedying、BIM Consulting</p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="content-img3">
                        <img src="./img/homes_pic_three_h.jpg" id="pic3">
                        <img src="./img/homes_pic_three.jpg">
                    </div>
                    <div class="content-txt">
                        <div class="jiange jiange3"></div>
                        <h2>3D ANIMATION</h2>
                        <p>Real estate advertising animation Design scheme Animation Corporate promotional Animation</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-img">
                <a class="img-top">
                    <img src="./img/mail_h.jpg">
                    <img src="./img/mail.jpg" id="img1">
                </a>
            </div>
            <div class="footer-bottom">
                <a class="img-bottom1">
                    <img src="./img/facebook_h.jpg">
                    <img src="./img/facebook.jpg" id="img2">
                </a>
                <a class="img-bottom1">
                    <img src="./img/youtube_h.jpg">
                    <img src="./img/youtube.jpg" id="img3">
                </a>
                <a class="img-bottom1">
                    <img src="./img/linkedln_h.jpg">
                    <img src="./img/linkedln.jpg" id="img4">
                </a>
                <a class="img-bottom1">
                    <img src="./img/twitter_h.jpg">
                    <img src="./img/twitter.jpg" id="img5">
                </a>
            </div>
            <div class="footer-txt">
                <h6>版权所有©1998-2015光明集团</h6>
            </div>
        </div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(".top").mouseover(function(){
        $("#pic1").fadeIn("slow");
        $(".jiange1").css("background-color","rgb(197,215,7)");
    });
    $(".top").mouseleave(function(){
        $("#pic1").fadeOut("slow");
        $(".jiange1").css("background-color","rgb(176,176,176)");
    });
    $(".center").mouseover(function(){
        $("#pic2").fadeIn("slow");
        $(".jiange2").css("background-color","rgb(197,215,7)");
    });
    $(".center").mouseleave(function(){
        $("#pic2").fadeOut("slow");
        $(".jiange2").css("background-color","rgb(176,176,176)");
    });
    $(".bottom").mouseover(function(){
        $("#pic3").fadeIn("slow");
        $(".jiange3").css("background-color","rgb(197,215,7)");

    });
    $(".bottom").mouseleave(function(){
        $("#pic3").fadeOut("slow");
        $(".jiange3").css("background-color","rgb(176,176,176)");
    });
</script>
</html>